<template>
  <a-card>
    <a-button
      type="primary"
      style="float: right"
      @click="showSetBaseUnion = true"
      >设置组成基层会员</a-button
    >
  </a-card>
  <MyTable
    :use-number="true"
    :table-data="tableData"
    :columns="columns"
    :pagination="pagination"
  ></MyTable>
  <MySetUnion
    @setBaseUnion="showSetBaseUnion = false"
    :isShow="showSetBaseUnion"
  />
</template>

<script setup lang="ts">
import MySetUnion from "./setUnion.vue";
import MyTable from "@/components/CommonDai/Table.vue";
import { getRepresentativeUser } from "@/api/contingent";
import { PaginationProps, Button, Modal } from "ant-design-vue";
import { DeleteOutlined } from "@ant-design/icons-vue";
import { ref, onMounted, createVNode } from "vue";
// 页面打开获取数据并赋值给表格
onMounted(() => {
  getRepresentativeUser("1").then((res: any) => {
    tableData.value = res.userList;
  });
});
/**
 * 数据显示表格功能
 * pagination 分页数据
 * tableData 表格数据
 */
const pagination = ref<PaginationProps>({
  current: 1,
  defaultPageSize: 10,
  onChange: page => {
    pagination.value.current = page;
  },
});
const tableData = ref<any[]>([]);
const columns = ref([
  {
    title: "基础工会名称",
    dataIndex: "name",
    isShow: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    isShow: true,
    align: "center",
    // record.name
    customRender: ({ record }: any) => {
      return createVNode(
        Button,
        {
          shape: "circle",
          danger: true,
          icon: createVNode(DeleteOutlined, {}),
          onClick: () => {
            Modal.confirm({
              title: "确定要移除该部门工会吗？",
              onOk() {
                console.log(record);
              },
              style: {
                top: "350px",
              },
            });
          },
        },
        () => ""
      );
    },
  },
]);
//
const showSetBaseUnion = ref(false);
</script>

<style scoped lang="less">
:deep(.ant-select) {
  width: 100px;
  margin-right: 20px;
}
:deep(.ant-card-body) {
  padding: 20px;
  // display: flex;
}
.flex {
  display: flex;
}
:deep(.ant-table-tbody) {
  .ant-table-cell {
    padding: 10px 16px;
  }
}
</style>
